{% extends 'base.html' %}
{% load staticfiles %}
{% load comment_tags %}
{% load likes_tags %}

{% block title %}博客列表{% endblock %}

{% block style %}
<link rel="stylesheet" href="{% static 'css/blog_list.css' %}">
{% endblock %}

{% block nav_blog_active %}
active
{% endblock %}

{% block content %}

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-8 col-md-8 col-sm-offset-1 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">
                    {% block list_title %}
                    <span class="panel-title">博客列表<span>
                            {% endblock %}
                </div>
                <div class="panel-body">
                    {% for blog in pg_list %}
                    <div class="blog-content">
                        <a href="{% url 'blog_detail' blog.pk  %}">
                            <h3>{{ blog.title }}</h3>
                        </a>
                        <ul class="blog-info-description">
                            <li>
                                作者: <a href="{% url 'type_list' blog.blog_type.pk %}">
                                    {{ blog.blog_type.type_name }}
                                </a>
                            </li>
                            <li>
                                发布日期: {{ blog.c_time|date:'Y-m-d' }}
                            </li>
                            <li>
                                阅读量: ({{ blog.get_read_num }})
                            </li>
                            <li>
                                评论数: ({% get_comment_count blog %})
                            </li>
                            <li>
                                点赞数: ({% get_like_count blog %})
                            </li>


                        </ul>
                        <p>摘要：{{ blog.content|striptags|truncatechars:120 }}</p>
                    </div class="panel-body">
                    {% empty %}
                    <div>
                        <p>--暂无博客，敬请期待--</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div class="navigation" aria-label="Page navigation">
                <ul class="pagination">
                    {% if pg_list.has_previous %}
                    <li>
                        <a href="?page={{ pg_list.previous_page_number }}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    {% else %}
                    <li class="disabled">
                        <span aria-hidden="true" class="disabled">&laquo;</span>
                    </li>
                    {% endif %}

                    {% for p in pg_range %}
                    {% if p == pg_list.number %}
                    <li class="active"><span>{{ p }}</span></li>
                    {% else %}
                    {% if p == '...' %}
                    <li class="disabled"><span>{{ p }}</span></li>
                    {% else %}
                    <li><a href="?page={{ p }}">{{ p }}</a></li>
                    {% endif %}

                    {% endif %}
                    {% endfor %}

                    {% if pg_list.has_next %}
                    <li>
                        <a href="?page={{ pg_list.next_page_number }}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    {% else %}
                    <li class="disabled">
                        <span aria-hidden="true">&raquo;</span>
                    </li>
                    {% endif %}

                </ul>
                <p>
                    共有{{ pg_list.paginator.count }}篇博客,
                    当前是第{{ pg_list.number }}页,
                    共有{{ pg_list.paginator.num_pages }}页
                </p>
            </div>

        </div>
        <div class="hidden-xs col-sm-2 col-md-2">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">博客分类</h3>
                </div>
                <div class="panel-body">
                    <ul class="list-types">
                        {% for blog_type in blog_types %}
                        <li>
                            <a href="{% url 'type_list' blog_type.pk %}">
                                {{ blog_type.type_name }}
                                ({{ blog_type.blog_count }})
                            </a>
                        </li>
                        {% empty%}
                        <li>暂无分类</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">日期归档</h3>
                </div>
                <div class="panel-body">
                    <ul class="list-types">
                        {% for blog_date, blog_count in blog_dates.items %}
                        <li>
                            <a href="{% url 'blogs_with_date' blog_date.year blog_date.month %}">
                                {{ blog_date|date:"Y年m月" }}({{ blog_count }})
                            </a>
                        </li>
                        {% empty%}
                        <li>暂无归档</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}
